<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的博客 - Layui实现</title>
    <!-- 引入 Layui 的 CSS -->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
    <style>
        /* 自定义样式 */
        .logo {
            height: 60px;
            line-height: 60px;
            font-size: 24px;
            font-weight: bold;
            color: #009688;
        }
        .nav-item.active {
            color: #009688 !important;
            border-bottom: 2px solid #009688;
        }
        .blog-list {

        }
        .blog-item {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px dashed #eee;
        }
        .blog-item:last-child {
            border-bottom: none;
        }
        .blog-title {
            font-size: 18px;
            margin-bottom: 10px;
        }
        .blog-title a {
            color: #333;
        }
        .blog-title a:hover {
            color: #009688;
        }
        .blog-meta {
            color: #999;
            font-size: 12px;
            margin-bottom: 10px;
        }
        .news-item {
            padding: 10px 0;
            border-bottom: 1px dashed #eee;
        }
        .news-item:last-child {
            border-bottom: none;
        }
        .news-item a {
            color: #666;
        }
        .news-item a:hover {
            color: #009688;
        }
        .tag-cloud {
            padding: 10px 0;
        }
        .tool-list {
            display: none;
        }
        .tool-list.active {
            display: block;
        }
        .tool-item {
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
            cursor: pointer;
        }
        .tool-item:hover {
            background-color: #f8f8f8;
        }
        .tool-content {
            display: none;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 4px;
            margin-top: 20px;
        }
        .tool-content.active {
            display: block;
        }
        textarea {
            width: 100%;
            min-height: 200px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .tool-actions {
            margin-top: 10px;
        }
    </style>
</head>
<body>
<!-- 页面主体 -->
<div class="layui-container">
    <!-- 头部区域 -->
    <div class="layui-row" style="margin: 20px 0;">
        <div class="layui-col-md12">
            <div class="logo">我的技术博客</div>
        </div>
    </div>

    <!-- 导航菜单 -->
    <div class="layui-row">
        <div class="layui-col-md12">
            <ul class="layui-nav">
                <li class="layui-nav-item active" data-type="home"><a href="#">首页</a></li>
                <li class="layui-nav-item" data-type="tools"><a href="#">在线工具</a></li>
                <li class="layui-nav-item"><a href="#">后端开发</a></li>
                <li class="layui-nav-item"><a href="#">数据库</a></li>
                <li class="layui-nav-item"><a href="#">运维</a></li>
                <li class="layui-nav-item"><a href="#">人工智能</a></li>
                <li class="layui-nav-item"><a href="#">生活随笔</a></li>
            </ul>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="layui-row" style="margin-top: 20px;">
        <!-- 左侧博客列表 -->
        <div class="layui-col-md8 blog-list">
            <!-- 首页内容 -->
            <div class="home-content">
                <div class="layui-card">
                    <div class="layui-card-header">最新文章</div>
                    <div class="layui-card-body">
                        <!-- 博客列表项 -->
                        <div class="blog-item">
                            <div class="blog-title"><a href="#">Layui 入门教程：从零开始学习前端框架</a></div>
                            <div class="blog-meta">
                                <span>发布于：2023-05-10</span>
                                <span style="margin-left: 15px;">分类：<a href="#" style="color: #009688;">前端技术</a></span>
                                <span style="margin-left: 15px;">阅读：256</span>
                            </div>
                            <div class="blog-content">
                                Layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用...
                            </div>
                        </div>

                        <div class="blog-item">
                            <div class="blog-title"><a href="#">Spring Boot 实战：构建 RESTful API</a></div>
                            <div class="blog-meta">
                                <span>发布于：2023-05-08</span>
                                <span style="margin-left: 15px;">分类：<a href="#" style="color: #009688;">后端开发</a></span>
                                <span style="margin-left: 15px;">阅读：189</span>
                            </div>
                            <div class="blog-content">
                                Spring Boot 可以轻松创建独立的、生产级的基于 Spring 的应用程序，您可以"直接运行"这些应用程序。我们对 Spring 平台和第三方库采取了固执的观点...
                            </div>
                        </div>

                        <div class="blog-item">
                            <div class="blog-title"><a href="#">MySQL 性能优化实践</a></div>
                            <div class="blog-meta">
                                <span>发布于：2023-05-05</span>
                                <span style="margin-left: 15px;">分类：<a href="#" style="color: #009688;">数据库</a></span>
                                <span style="margin-left: 15px;">阅读：312</span>
                            </div>
                            <div class="blog-content">
                                数据库性能优化是每个后端开发者都需要掌握的技能，本文将介绍 MySQL 常见的性能优化方法，包括索引优化、查询优化、配置优化等...
                            </div>
                        </div>

                        <!-- 分页 -->
                        <div id="page" style="text-align: center; margin-top: 20px;"></div>
                    </div>
                </div>
            </div>

            <!-- 工具列表 -->
            <div class="tool-list" id="toolList">
                <div class="layui-card">
                    <div class="layui-card-header">在线工具</div>
                    <div class="layui-card-body">
                        <div class="tool-item" data-tool="jsonFormat">
                            <h3>JSON格式化</h3>
                            <p>美化JSON数据，使其更易读</p>
                        </div>

                        <div class="tool-item" data-tool="jsonToEntity">
                            <h3>JSON转实体类</h3>
                            <p>根据JSON数据生成Java/Python/C#等实体类</p>
                        </div>

                        <div class="tool-item" data-tool="jsonCompress">
                            <h3>JSON压缩</h3>
                            <p>将JSON压缩为一行，去除多余空格</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- JSON格式化工具 -->
            <div class="tool-content" id="jsonFormatTool">
                <div class="layui-card">
                    <div class="layui-card-header">JSON格式化工具</div>
                    <div class="layui-card-body">
                        <textarea id="jsonInput" placeholder="请输入JSON字符串..."></textarea>
                        <div class="tool-actions">
                            <button class="layui-btn" id="formatBtn">格式化</button>
                            <button class="layui-btn layui-btn-primary" id="clearBtn">清空</button>
                        </div>
                        <div style="margin-top: 20px;">
                            <h3>格式化结果：</h3>
                            <pre id="jsonOutput" style="background: #f8f8f8; padding: 10px; border-radius: 4px;"></pre>
                        </div>
                    </div>
                </div>
            </div>

            <!-- JSON转实体类工具 -->
            <div class="tool-content" id="jsonToEntityTool">
                <div class="layui-card">
                    <div class="layui-card-header">JSON转实体类工具</div>
                    <div class="layui-card-body">
                        <textarea id="jsonEntityInput" placeholder="请输入JSON字符串..."></textarea>
                        <div class="tool-actions">
                            <button class="layui-btn" id="generateJavaBtn">生成Java类</button>
                            <button class="layui-btn" id="generatePythonBtn">生成Python类</button>
                            <button class="layui-btn" id="generateCSharpBtn">生成C#类</button>
                            <button class="layui-btn layui-btn-primary" id="clearEntityBtn">清空</button>
                        </div>
                        <div style="margin-top: 20px;">
                            <h3>生成结果：</h3>
                            <pre id="entityOutput" style="background: #f8f8f8; padding: 10px; border-radius: 4px;"></pre>
                        </div>
                    </div>
                </div>
            </div>

            <!-- JSON压缩工具 -->
            <div class="tool-content" id="jsonCompressTool">
                <div class="layui-card">
                    <div class="layui-card-header">JSON压缩工具</div>
                    <div class="layui-card-body">
                        <textarea id="jsonCompressInput" placeholder="请输入JSON字符串..."></textarea>
                        <div class="tool-actions">
                            <button class="layui-btn" id="compressBtn">压缩</button>
                            <button class="layui-btn layui-btn-primary" id="clearCompressBtn">清空</button>
                        </div>
                        <div style="margin-top: 20px;">
                            <h3>压缩结果：</h3>
                            <pre id="compressOutput" style="background: #f8f8f8; padding: 10px; border-radius: 4px;"></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="layui-col-md4">
            <!-- 最新资讯 -->
            <div class="layui-card">
                <div class="layui-card-header">最新资讯</div>
                <div class="layui-card-body">
                    <ul>
                        <li class="news-item"><a href="#">Layui 2.6.8 版本发布，修复多项问题</a></li>
                        <li class="news-item"><a href="#">Vue 3.2 正式发布，性能提升显著</a></li>
                        <li class="news-item"><a href="#">Spring 6.0 即将发布，新特性预览</a></li>
                        <li class="news-item"><a href="#">TypeScript 5.0 发布，编译速度大幅提升</a></li>
                        <li class="news-item"><a href="#">Docker 最新安全漏洞修复方案</a></li>
                        <li class="news-item"><a href="#">Kubernetes 1.26 版本新功能介绍</a></li>
                        <li class="news-item"><a href="#">Python 3.11 性能提升25%</a></li>
                        <li class="news-item"><a href="#">Rust 连续7年成为最受欢迎语言</a></li>
                        <li class="news-item"><a href="#">WebAssembly 2.0 草案发布</a></li>
                        <li class="news-item"><a href="#">GitHub Copilot X 发布，AI编程助手升级</a></li>
                    </ul>
                </div>
            </div>

            <!-- 标签云 -->
            <div class="layui-card" style="margin-top: 20px;">
                <div class="layui-card-header">标签云</div>
                <div class="layui-card-body tag-cloud">
                    <a href="#" class="layui-btn layui-btn-xs">Layui</a>
                    <a href="#" class="layui-btn layui-btn-xs">前端</a>
                    <a href="#" class="layui-btn layui-btn-xs">Java</a>
                    <a href="#" class="layui-btn layui-btn-xs">Spring</a>
                    <a href="#" class="layui-btn layui-btn-xs">MySQL</a>
                    <a href="#" class="layui-btn layui-btn-xs">Redis</a>
                    <a href="#" class="layui-btn layui-btn-xs">Docker</a>
                    <a href="#" class="layui-btn layui-btn-xs">K8s</a>
                    <a href="#" class="layui-btn layui-btn-xs">Python</a>
                    <a href="#" class="layui-btn layui-btn-xs">AI</a>
                    <a href="#" class="layui-btn layui-btn-xs">JavaScript</a>
                    <a href="#" class="layui-btn layui-btn-xs">Vue</a>
                    <a href="#" class="layui-btn layui-btn-xs">React</a>
                    <a href="#" class="layui-btn layui-btn-xs">微服务</a>
                    <a href="#" class="layui-btn layui-btn-xs">架构</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="layui-row" style="margin: 30px 0; text-align: center; color: #999; padding: 20px 0; border-top: 1px solid #eee;">
        <p>© 2023 我的技术博客 - 基于 Layui 构建 | <a href="#" style="color: #009688;">关于我们</a> | <a href="#" style="color: #009688;">联系方式</a></p>
    </div>
</div>

<!-- 引入 Layui 的 JS -->
<script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
<script>
    layui.use(['element', 'laypage', 'jquery'], function(){
        var element = layui.element;
        var laypage = layui.laypage;
        var $ = layui.jquery;

        // 初始化页面状态
        var currentPage = 'home';

        // 导航菜单点击事件
        $('.layui-nav-item').on('click', function(){
            $('.layui-nav-item').removeClass('active');
            $(this).addClass('active');

            var pageType = $(this).data('type');
            if (pageType) {
                currentPage = pageType;
                showPage(currentPage);
            }
        });

        // 显示对应页面
        function showPage(page) {
            $('.home-content').hide();
            $('.tool-list').hide();
            $('.tool-content').removeClass('active');

            if (page === 'home') {
                $('.home-content').show();
            } else if (page === 'tools') {
                $('#toolList').show();
            }
        }

        // 工具项点击事件
        $('.tool-item').on('click', function() {
            var tool = $(this).data('tool');
            $('#toolList').hide();
            $('.tool-content').removeClass('active');
            $('#' + tool + 'Tool').addClass('active');
        });

        // 返回工具列表
        $('.layui-card-header').on('click', function() {
            if ($(this).parent().parent().hasClass('tool-content')) {
                $('.tool-content').removeClass('active');
                $('#toolList').show();
            }
        });

        // JSON格式化
        $('#formatBtn').on('click', function() {
            try {
                var jsonStr = $('#jsonInput').val();
                var jsonObj = JSON.parse(jsonStr);
                $('#jsonOutput').text(JSON.stringify(jsonObj, null, 4));
            } catch (e) {
                layer.msg('JSON格式错误: ' + e.message);
            }
        });

        // 清空JSON格式化
        $('#clearBtn').on('click', function() {
            $('#jsonInput').val('');
            $('#jsonOutput').text('');
        });

        // 生成Java类
        $('#generateJavaBtn').on('click', function() {
            try {
                var jsonStr = $('#jsonEntityInput').val();
                var jsonObj = JSON.parse(jsonStr);
                var javaCode = generateJavaClass(jsonObj, 'Example');
                $('#entityOutput').text(javaCode);
            } catch (e) {
                layer.msg('JSON格式错误: ' + e.message);
            }
        });

        // 生成Python类
        $('#generatePythonBtn').on('click', function() {
            try {
                var jsonStr = $('#jsonEntityInput').val();
                var jsonObj = JSON.parse(jsonStr);
                var pythonCode = generatePythonClass(jsonObj, 'Example');
                $('#entityOutput').text(pythonCode);
            } catch (e) {
                layer.msg('JSON格式错误: ' + e.message);
            }
        });

        // 生成C#类
        $('#generateCSharpBtn').on('click', function() {
            try {
                var jsonStr = $('#jsonEntityInput').val();
                var jsonObj = JSON.parse(jsonStr);
                var csharpCode = generateCSharpClass(jsonObj, 'Example');
                $('#entityOutput').text(csharpCode);
            } catch (e) {
                layer.msg('JSON格式错误: ' + e.message);
            }
        });

        // 清空实体类生成
        $('#clearEntityBtn').on('click', function() {
            $('#jsonEntityInput').val('');
            $('#entityOutput').text('');
        });

        // JSON压缩
        $('#compressBtn').on('click', function() {
            try {
                var jsonStr = $('#jsonCompressInput').val();
                var jsonObj = JSON.parse(jsonStr);
                $('#compressOutput').text(JSON.stringify(jsonObj));
            } catch (e) {
                layer.msg('JSON格式错误: ' + e.message);
            }
        });

        // 清空JSON压缩
        $('#clearCompressBtn').on('click', function() {
            $('#jsonCompressInput').val('');
            $('#compressOutput').text('');
        });

        // 生成Java类函数
        function generateJavaClass(obj, className) {
            var result = 'public class ' + className + ' {\n';

            for (var key in obj) {
                var type = typeof obj[key] === 'number' ?
                    (obj[key] % 1 === 0 ? 'int' : 'double') :
                    (typeof obj[key]).charAt(0).toUpperCase() + (typeof obj[key]).slice(1);

                if (type === 'Object') type = 'Object';
                if (type === 'Array') type = 'List<Object>';

                result += '    private ' + type + ' ' + key + ';\n';
            }

            result += '\n';

            for (var key in obj) {
                var type = typeof obj[key] === 'number' ?
                    (obj[key] % 1 === 0 ? 'int' : 'double') :
                    (typeof obj[key]).charAt(0).toUpperCase() + (typeof obj[key]).slice(1);

                if (type === 'Object') type = 'Object';
                if (type === 'Array') type = 'List<Object>';

                // Getter
                result += '    public ' + type + ' get' + key.charAt(0).toUpperCase() + key.slice(1) + '() {\n';
                result += '        return ' + key + ';\n';
                result += '    }\n\n';

                // Setter
                result += '    public void set' + key.charAt(0).toUpperCase() + key.slice(1) + '(' + type + ' ' + key + ') {\n';
                result += '        this.' + key + ' = ' + key + ';\n';
                result += '    }\n\n';
            }

            result += '}';
            return result;
        }

        // 生成Python类函数
        function generatePythonClass(obj, className) {
            var result = 'class ' + className + ':\n';
            result += '    def __init__(self):\n';

            for (var key in obj) {
                result += '        self.' + key + ' = None\n';
            }

            result += '\n    @classmethod\n    def from_json(cls, json_data):\n';
            result += '        obj = cls()\n';

            for (var key in obj) {
                result += '        obj.' + key + ' = json_data.get(\'' + key + '\')\n';
            }

            result += '        return obj\n';
            return result;
        }

        // 生成C#类函数
        function generateCSharpClass(obj, className) {
            var result = 'public class ' + className + '\n';
            result += '{\n';

            for (var key in obj) {
                var type = typeof obj[key] === 'number' ?
                    (obj[key] % 1 === 0 ? 'int' : 'double') :
                    (typeof obj[key]).charAt(0).toUpperCase() + (typeof obj[key]).slice(1);

                if (type === 'Object') type = 'object';
                if (type === 'Array') type = 'List<object>';

                result += '    public ' + type + ' ' + key.charAt(0).toUpperCase() + key.slice(1) + ' { get; set; }\n';
            }

            result += '}';
            return result;
        }

        // 分页
        laypage.render({
            elem: 'page',
            count: 50, // 数据总数
            limit: 10,
            limits: [10, 20, 30],
            layout: ['count', 'prev', 'page', 'next', 'limit'],
            jump: function(obj){
                // 模拟分页切换
                console.log('切换到第 '+ obj.curr +' 页，显示 '+ obj.limit +' 条数据');
            }
        });
    });
</script>
</body>
</html>